import Divider from 'antd/es/divider';
import { AppStore } from '../../../../store';
import { useEffect, useMemo, useState } from 'react';
import { ButtonProps } from 'antd/es/button/button'
import { ISelectEventParam } from '@manycore/custom-ksg-viewer-sdk';
import { flattenModels } from '../../../../util';
import AutoComplete from 'antd/es/auto-complete';
import message from 'antd/es/message/index';

export function LabelDemo(props: {
    createButton: (infos: Array<{
        /** buttonName */
        name: string,
        onClick: () => void;
        buttonProps?: ButtonProps;
    }>) => JSX.Element[]
}) {
    const { createButton } = props;
    const { appState: { app, jsonData } } = AppStore.useContainer();
    const [inputModelId, setInputModelId] = useState<string>();
    const [text, setText] = useState<string>();

    useEffect(() => {
        if (!app) {
            return;
        }
        const onListener = (param: ISelectEventParam) => {
            // 默认将选中的写入到input
            setInputModelId(param[0]?.id);
        }
        app.selectionService.on(onListener);
        return () => app.selectionService.off(onListener);
    }, [app])

    const models = useMemo(() => {
        return flattenModels(jsonData?.paramModel || []);
    }, [jsonData]);

    const CApis = [{
        name: '写入标签',
        onClick: () => {
            if (!inputModelId) {
                message.error('请先输入标签关联的模型id!');
                return;
            }

            app!.labelService.addLabel({
                modelId: inputModelId,
                text: text || inputModelId
            }, {
                // 定义标签风格，同style
                style: {
                    color: 'rgb(225,60,9)',
                    backgroundColor: 'rgb(147,209,83)',
                    fontWeight: '600',
                    padding: '2px',
                    textShadow: '-1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff',
                }
            });
        }
    },
    {
        name: '移除标签',
        onClick: () => {
            if (!inputModelId) {
                message.error('请先输入标签关联的模型id!');
                return;
            }
            app!.labelService.removeLabel({ modelId: inputModelId });
        }
    },
    {
        name: '清空全部标签',
        onClick: () => {
            app!.labelService.clearLabel();
        }
    }]

    return <>
        <Divider>模型标签</Divider>
        <AutoComplete value={inputModelId} onChange={(data) => setInputModelId(data)} style={{ width: '100%' }} placeholder='输入或者选择标签关联的模型id' options={models.map(m => ({ value: m.id }))} />
        <AutoComplete value={text} onChange={(data) => setText(data)} style={{ width: '100%' }} placeholder='标签名称 默认写入模型id' />
        {createButton(CApis)}
    </>
}